<template>
    <div class="bl-drag" ref="bldrag">
        <div class="left-panel" :style="{width:leftWidth}">
            <slot name="left-content"></slot>
            <div class="ui-draggable" ref="line">
                <i class="icon-draggrid"></i>
            </div>
        </div>
        <div class="right-panel" :style="{width:rightWidth}">
            <slot name="right-content"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: "bl-drag",
    props: {
        id: {
            type: String,
            default: function() {
                return "";
            }
        }
    },
    data() {
        return {
            leftWidth: "50%",
            rightWidth: "50%",
            obj: {
                drag: false,
                clickX: 0
            },
            width: 0,
            offset: 0
        };
    },
    computed: {},
    components: {},
    watch: {
        id(val, oldVal) {
            // this.init();
        }
    },
    mounted() {
        // this.init();
    },
    methods: {
        init() {
            if (this.id) {
                this.width = this.$refs.bldrag.clientWidth;
                this.documentDragEvent(this.$refs.bldrag);

                let move = this.$utils.storage("bailian-drag-" + this.id);

                if (move) {
                    this.leftWidth = move + "px";
                    this.rightWidth = this.width - move + "px";
                }
            }
        },
        documentDragEvent(dom) {
            dom.onmousemove = e => {
                let pageX;
                if (this.offset > 0) {
                    pageX = e.pageX - this.offset;
                } else {
                    pageX = e.pageX;
                }
                let x = Math.abs(this.obj.clickX - pageX);

                if (this.obj && this.obj.drag === true) {
                    let w = this.width;
                    let move;
                    if (pageX <= this.obj.clickX) {
                        this.$refs.line.style.left = this.obj.clickX - x + "px";
                        this.$refs.line.style.width = "2px";
                        move = this.obj.clickX - x + 3;
                        this.leftWidth = move + "px";
                        this.rightWidth = w - move + "px";
                    } else {
                        this.$refs.line.style.left = this.obj.clickX + x + "px";
                        this.$refs.line.style.width = "2px";
                        move = this.obj.clickX + x + 3;
                        this.leftWidth = move + "px";
                        this.rightWidth = w - move + "px";
                    }
                    this.$utils.storage("bailian-drag-" + this.id, move);
                    this.$emit("on-dragmove", e);
                }
            };
            dom.onmouseup = e => {
                this.obj.drag = false;
                // this.$emit('on-dragover', e);
            };
        },
        hMouseDown(e) {
            let w = this.width;

            let lineLeft = this.$refs.line.offsetLeft;
            this.offset = e.pageX - lineLeft;

            if (this.offset > 0) {
                this.obj.clickX = lineLeft;
            } else {
                this.obj.clickX = e.pageX;
            }
            this.$refs.line.style.left = this.obj.clickX - 0 + "px";
            this.$refs.line.style.width = "2px";
            this.leftWidth = this.obj.clickX + 5 + "px";
            this.rightWidth = w - this.obj.clickX - 0 + "px";
            this.obj.drag = true;
        },
        hMouseUp(e) {
            this.obj.drag = false;

            this.$emit("on-dragover", e);
        }
    }
};
</script>
<style lang="stylus" scoped>
.bl-drag {
    width: 100%;
    display: flex;
    text-align: left;
    color: #fff;
    position: relative;
    width: 100%;
    height: 100%;
    clear: both;

    .ui-draggable {
        position: absolute;
        right: 0;
        top: 0;
        float: left;
        width: 0;
        height: 100%;
        display: block;
        /* cursor: ew-resize; */
        background-color: #efefef;
        z-index: 9;
    }

    .icon-draggrid {
        width: 3px;
        height: 33px;
        display: block;
        left: 1px;
        top: 35%;
        position: absolute;
        /* border-radius: 15%; */
        font-size: 32px;
        display: none;
    }

    .left-panel, .right-panel {
        position: relative;
        float: left;
        height: calc(100% - 2px);
        padding: 0px;
        width: 50%;
        overflow-y: hidden;
        border-top: 1px solid #dfe2e6;
    }

    .right-panel {
        /* overflow: hidden; */
    }
}
</style>
